<template>
  <div class="my-detail-box">
    <div class="my-content-box df aic jcsb" style="height: 51px">
      <div class="icon-box df aic" @click="handleClose()">
        <i class="iconfont icon-fanhui1"></i>
        <span>返回</span>
      </div>
      <div v-if="type == '1' && power == '1'" class="detail-btn df aic">
        <div class="btn btn-reject" @click="handleApprove('2')">
          <i class="iconfont icon-yijianfoujue"></i>拒绝
        </div>
        <div class="btn btn-approve" @click="handleApprove('1')"><i class="iconfont icon-dui"></i>同意</div>
      </div>
    </div>
    <div class="my-content-box content-box">
      <div v-if="menuType == '2'" class="detail-item reason-item">
        <div class="label">申请原因:</div>
        <div class="text">{{ state.applyReason }}</div>
      </div>
      <div class="detail-item-box">
        <div v-for="(item, index) in state.detailItemList" :key="index" class="detail-item">
          <span class="label">{{ item.name }}:</span>
          <span v-if="item.key == 'businessLicenseUrl'" class="img-box"
            ><img :src="state.formData.businessLicenseUrl" alt=""
          /></span>
          <span v-else class="text">{{ state.formData[item.key] }}</span>
        </div>
      </div>
    </div>
    <div class="my-content-box content-box">
      <div class="my-tab-box df aic">
        <div class="tab-item" :class="state.tabId === '1' ? 'active' : ''" @click="handleTabChange('1')">
          债务还息计划
        </div>
        <div class="tab-item" :class="state.tabId === '2' ? 'active' : ''" @click="handleTabChange('2')">
          债务还本计划
        </div>
      </div>
      <table-page-content
        ref="tableRef"
        :loading="tableObj.loading"
        :table-data="state.tabId == '1' ? tableObj.tableList : tableObj.tableList2"
        :table-headers="state.tabId == '1' ? tableDetailHeader1 : tableDetailHeader2"
        :table-height="'400px'"
        :is-slot-num="false"
        :is-pager="false"
      >
      </table-page-content>
    </div>
    <approve-component ref="approveRef" :menu-type="menuType" @handle-added="handleClose"></approve-component>
  </div>
</template>

<script lang="ts" setup>
import { useProxy } from '@/utils/proxy'
import { getMsgDetailById, dictionary } from './api'
import { spliceCodeName } from '@/utils/index'
import { tableDetailHeader1, tableDetailHeader2 } from './config'
import ApproveComponent from './components/approve.vue'
const { proxy } = useProxy()
const approveRef = ref()
const detailId = proxy.$route.params && (proxy.$route.params.detailId as string)
const type = proxy.$route.query && (proxy.$route.query.type as string) // 1 待审核 2 已审核
const menuType = proxy.$route.query && (proxy.$route.query.menuType as string) // 1上报申请 2退回申请 3还款付息
const power = proxy.$route.query && (proxy.$route.query.power as string) // 审核权限 0无权限 1有权限
const state = reactive({
  tabId: '1',
  applyReason: '',
  detailItemList: [
    { key: 'areaCode', name: '区域编码' },
    { key: 'debtId', name: '合同编号' },
    { key: 'contractNo', name: '合同编号' },
    { key: 'debtName', name: '项目名称' },
    { key: 'enterpriseId', name: '企业编号' },
    { key: 'enterpriseName', name: '企业名称' },
    { key: 'corporationName', name: '集团名称' },
    { key: 'debtUse', name: '债务用途' },
    { key: 'debtNature', name: '债务性质' },
    { key: 'debtType', name: '债务类别' },
    { key: 'loanTime', name: '放款/起息时间' },
    { key: 'expirationTime', name: '债务到期时间' },
    { key: 'repaymentTime', name: '债务兑付时间' },
    { key: 'totalPrincipal', name: '债务本金总金额' },
    { key: 'interestRate', name: '合同利率' },
    { key: 'cycle', name: '还款周期' },
    { key: 'interestCycle', name: '利息周期' },
    { key: 'calculation', name: '计息日期' },
    { key: 'intervals', name: '还款间隔' },
    { key: 'inIntervals', name: '还息间隔' },
    { key: 'otherCostType', name: '其他费用类别' },
    { key: 'otherCostAmount', name: '其他费用金额' },
    { key: 'debtBalance', name: '债务余额' },
    { key: 'moneyUsed', name: '资金已使用金额' },
    { key: 'mechanismId', name: '授信/登记机构编码' },
    { key: 'mechanismName', name: '授信/登记机构名称' },
    { key: 'repayState', name: '还款状态' },
    { key: 'createTime', name: '创建时间' },
    { key: 'updateTime', name: '修改时间' },
    { key: 'explains', name: '介绍' },
    { key: 'remark', name: '备注' },
    // { key: 'otherCostType', name: '其他费用类型' },
    // { key: 'otherCostAmount', name: '其他费用金额' },
    { key: 'contractRate', name: '合同利率' },
    { key: 'continueLoan', name: '是否可以续贷' },
    { key: 'isChengtou', name: '是否城投债' },
    { key: 'isZhiya', name: '金额存单质押' }
  ],
  formData: {
    isChengtou: '',
    contractRate: '',
    continueLoan: '',
    isZhiya: '',
    areaCode: '',
    debtId: '',
    contractNo: '',
    debtName: '',
    enterpriseId: '',
    enterpriseName: '',
    corporationName: '',
    debtUse: '',
    debtNature: '',
    debtType: '',
    loanTime: '',
    expirationTime: '',
    repaymentTime: '',
    totalPrincipal: '',
    interestRate: '',
    cycle: '',
    interestCycle: '',
    calculation: '',
    intervals: '',
    inIntervals: '',
    otherCostType: '',
    otherCostAmount: '',
    debtBalance: '',
    moneyUsed: '',
    mechanismId: '',
    mechanismName: '',
    repayState: '',
    createTime: '',
    updateTime: '',
    explains: '',
    remark: ''
  } as any
})
const tableObj = reactive({
  loading: false,
  tableList: [],
  tableList2: []
})
// 表格tab切换
const handleTabChange = (val: string) => {
  state.tabId = val
}
// 返回
const handleClose = () => {
  proxy.$router.go(-1)
}
// 审批
const handleApprove = (type: string) => {
  approveRef.value.state.approveType = type
  approveRef.value.state.approveId.push(detailId)
  approveRef.value.state.show = true
}
// 获取详情
const getDetail = async () => {
  if (menuType != '1') {
    state.detailItemList = state.detailItemList.filter((v) => v.key != 'corporationName')
  }
  let { data } = await getMsgDetailById<any>(detailId, Number(menuType))
  data.continueLoan = data.continueLoan === '0' ? '否' : '是'
  data.isChengtou = data.isChengtou === '0' ? '否' : '是'
  const form = {} as any
  for (const item of Object.keys(state.formData)) {
    if (item == 'areaCode') {
      form[item] = spliceCodeName(data.areaCode, data.areaCodeDescr)
    } else if (item == 'debtUse') {
      form[item] = data.debtUseDescr || data.debtUseName
    } else if (item == 'debtNature') {
      form[item] = data.debtNatureDescr || data.debtNatureName
    } else if (item == 'debtType') {
      form[item] = data.debtTypeDescr || data.debtTypeName
    } else if (item == 'otherCostType') {
      let name: string = await dictionaryZD(data.otherCostType)
      form[item] = name || data.otherCostTypeName
    } else if (item == 'repayState') {
      form[item] = data.repayStateDescr || data.repayStateDescr
    } else if (item == 'mechanismName') {
      form[item] = data.mechanismName || data.mechanismIdName
    } else {
      form[item] = data[item] ?? ''
    }
  }
  state.formData = form
  if (menuType == '1' || menuType == '3') {
    tableObj.tableList = data.interestPlanList || []
    tableObj.tableList2 = data.principalPlanList || []
  } else if (menuType == '2') {
    state.applyReason = data.applyReason || ''
    tableObj.tableList = data.enterpriseInterestPlanItems || []
    tableObj.tableList2 = data.enterprisePrincipalPlanItems || []
  }
}
// 字典
let dictionaryZD = async (code: string) => {
  let { data } = await dictionary()
  let name = ''
  data[0].dictionaryChildLists.forEach((r: any) => {
    if (r.dictionaryCode === code) {
      name = r.dictionaryName
    }
  })
  return name
}

getDetail()
</script>

<style lang="scss" scoped>
.content-box {
  margin-top: 9px;
}
.detail-item {
  width: 25%;
  white-space: nowrap;
}
.my-tab-box {
  margin-top: 4px;
  .tab-item {
    height: 29px;
  }
  .active {
    position: relative;
    border-bottom: none;
    &::after {
      content: '';
      box-sizing: border-box;
      width: 60px;
      display: inline-block;
      border-bottom: 2px solid $blue;
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
